<template>
<view>
<view class="container">
    <view class="search-bar">
        <form @submit="submitSearch">
            <input class="search-input" :value="keyword" placeholder="输入商品名称" name="word" auto-focus></input>
            <button class="search-btn" form-type="submit">
                <image class="wh100 search-img" src="/static/images/sea.png"></image>
            </button>
        </form>
    </view>
    <view class="nav">
        <navigator :class="'nav-item  ' + (sort == 'goods_id' ? 'red-on' : '')" @tap="changeTab" data-type="1">综合</navigator>
        <navigator :class="'nav-item  ' + (sort == 'is_new' ? 'red-on' : '')" @tap="changeTab" data-type="2">新品</navigator>
        <navigator :class="'nav-item  ' + (sort == 'sales_sum' ? 'red-on' : '')" @tap="changeTab" data-type="3">销量</navigator>
        <navigator :class="'nav-item  ' + (sort == 'distribut' ? 'red-on' : '')" @tap="changeTab" data-type="4">佣金
            <view :class="'ico-dir ' + (sort!='distribut'?'':(desc=='asc'?'ico-dir-up':'ico-dir-dn'))" :style="'background-image: url(' + resourceUrl + '/static/images/sxjt.png);'"></view>
        </navigator>
        <navigator class="nav-item" @tap="openFilterModal" data-href>筛选<view class="ico-filter"><image class="wh100" src="/static/images/xx.png"></image></view></navigator>
    </view>
    <view class="disgoods-list">
        <view v-for="(item, index) in goods" :key="index" class="choice_item">
            <view class="goods-check"><checkbox :checked="item.selected" @tap="selectGoods" :data-id="item.goods_id"></checkbox></view>
            <view class="img-wrap">
                <image @tap="goodsDetail" :data-id="item.goods_id" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=200&height=200'"></image>
            </view>
            <view class="item-cont">
                <view class="title" @tap="goodsDetail" :data-id="item.goods_id">{{item.goods_name}}</view>
                <view class="price">分成金额：{{item.distribut}}</view>
                <view class="comment">￥{{item.shop_price}}</view>
                <!-- <view class="price">已售出：{{item.sales_sum}}件</view> -->
            </view>
        </view>
    </view>
    <view class="no-data" v-if="!goods || goods.length == 0">
        <image src="/static/images/cart-null.png" class="cart-image"></image>
        <view class="no-data-title">没有相关的数据</view>
    </view>
    <view class="distri-bot">
        <view class="bot-left">
            <checkbox class="check-all" :checked="checkAllToggle" @tap="checkAll"></checkbox>
            <label>全选</label>
        </view>
        <view class="bot-right" @tap="addGoods">
            <button>添加</button>
        </view>
    </view>
</view>

<!-- 筛选弹框  -->
<view>
    <view class="cover-layer" @tap="closeFilterModal" :hidden="!openFilter"></view> 
    <view class="filter-modal" :hidden="!openFilter">
        <icon type="cancel" color="gray" size="22" class="modal-close" @tap="closeFilterModal"></icon>
        <view class="all-classification">
            <view class="allcla-btn" @tap="categoryTap">全部分类</view>
            <view v-for="(item, index) in categoryList" :key="index" :hidden="!categoryShow" class="claitem-box">
                <view class="cla-item" @tap="checkCategory" :data-id="item.id">{{item.name}}</view>
            </view>
        </view>
        <view class="all-brand">
            <view class="allbra-btn" @tap="brandTap">全部品牌</view>
            <view v-for="(item, index) in brandList" :key="index" :hidden="!brandShow" class="braitem-box">
                <view class="bra-item" @tap="checkBrand" :data-id="item.id">{{item.name}}</view>
            </view>
        </view>
    </view>
</view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      currentPage: 1,
      openFilter: false,
      //是否打开筛选弹框
      baseUrl: '/api/Distribut/goods_list',
      //基地址
      requestUrl: '',
      //请求的链接
      desc: 'asc',
      //佣金排序
      goods: null,
      checkAllToggle: false,
      //全选标志
      brandList: null,
      //全部品牌
      categoryList: null,
      //全部分类
      categoryShow: false,
      brandShow: false,
      keyword: '',
      sort: '',
      goodList: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    load.init(this, '', 'goods');
    var requestUrl = this.baseUrl + '?sort=goods_id';
    this.requestGoodsList(requestUrl);
    this.requestCat();
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestGoodsList(this.requestUrl);
      this.dealGoods();
      this.setData({
        checkAllToggle: false
      });
    }
  },
  onPullDownRefresh: function () {
    this.resetData();
    this.requestGoodsList(this.requestUrl);
    this.setData({
      checkAllToggle: false
    });
  },
  methods: {
    requestCat: function () {
      var that = this;
      request.get('/api/Distribut/goods_types', {
        success: function (res) {
          that.setData({
            brandList: res.data.result.brandList
          });
          that.setData({
            categoryList: res.data.result.categoryList
          });
        }
      });
    },
    categoryTap: function () {
      var categoryShow = !this.categoryShow;
      this.setData({
        categoryShow: categoryShow
      });
    },
    brandTap: function () {
      var brandShow = !this.brandShow;
      this.setData({
        brandShow: brandShow
      });
    },
    checkCategory: function (e) {
      var id = e.currentTarget.dataset.id;
      var url = this.baseUrl + '?cat_id=' + id;
      this.resetData();
      this.requestGoodsList(url);
      this.closeFilterModal();
    },
    checkBrand: function (e) {
      var id = e.currentTarget.dataset.id;
      var url = this.baseUrl + '?brand_id=' + id;
      this.resetData();
      this.requestGoodsList(url);
      this.closeFilterModal();
    },
    changeTab: function (e) {
      var type = e.currentTarget.dataset.type;
      var url;
      var sort;

      if (type == 1) {
        //综合
        sort = 'goods_id';
        this.setData({
          sort: sort
        });
        url = this.baseUrl + '?sort=' + sort;
      } else if (type == 2) {
        //新品
        sort = 'is_new';
        this.setData({
          sort: sort
        });
        url = this.baseUrl + '?sort=' + sort;
      } else if (type == 3) {
        //销量
        sort = 'sales_sum';
        this.setData({
          sort: sort
        });
        url = this.baseUrl + '?sort=' + sort;
      } else {
        //佣金
        sort = 'distribut';
        this.setData({
          sort: sort
        });

        if (this.desc == 'asc') {
          this.setData({
            desc: 'desc'
          });
          url = this.baseUrl + '?sort=' + sort + '&order=' + this.desc;
        } else {
          this.setData({
            desc: 'asc'
          });
          url = this.baseUrl + '?sort=' + sort + '&order=' + this.desc;
        }
      }

      this.setData({
        keyword: ''
      });
      this.resetData();
      this.requestGoodsList(url);
    },
    requestGoodsList: function (requestUrl) {
      var that = this;
      this.requestUrl = requestUrl;
      requestUrl += (requestUrl.indexOf('?') > 0 ? '&' : '?') + 'p=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++;
        uni.stopPullDownRefresh();
      });
    },

    /** 提交搜索事件 */
    submitSearch: function (e) {
      var word = e.detail.value.word;

      if (typeof word != 'string' || word == '') {
        return app.globalData.showTextWarining('请输入关键词');
      }

      this.setData({
        keyword: word
      });
      this.resetData();
      var url = this.baseUrl + '?key_word=' + word;
      this.requestGoodsList(url);
    },
    openFilterModal: function () {
      this.setData({
        openFilter: true
      });
    },
    closeFilterModal: function () {
      this.setData({
        openFilter: false
      });
    },

    /** 商品筛选 */
    filterGoods: function (e) {
      this.resetData();
      this.requestGoodsList(e.currentTarget.dataset.href);
      this.closeFilterModal();
    },

    /** 重置数据 */
    resetData: function () {
      load.resetConfig();
      this.goods = null;
      this.currentPage = 1;
    },
    dealGoods: function () {
      var goodList = [];
      var goods = this.goods;

      for (var i = 0; i < goods.length; i++) {
        goodList.push({
          goods_id: goods[i].goods_id,
          goods_name: goods[i].goods_name,
          selected: false,
          sales_sum: goods[i].sales_sum,
          distribut: goods[i].distribut,
          shop_price: goods[i].shop_price
        });
      }

      this.setData({
        goods: goodList
      });
    },
    //全选
    checkAll: function () {
      var checkAll = !this.checkAllToggle;
      var goodList = [];
      var goods = this.goods;

      if (goods == null || goods.length <= 0) {
        return;
      }

      for (var i = 0; i < goods.length; i++) {
        goodList.push({
          goods_id: goods[i].goods_id,
          goods_name: goods[i].goods_name,
          selected: checkAll,
          distribut: goods[i].distribut,
          sales_sum: goods[i].sales_sum,
          shop_price: goods[i].shop_price
        });
      }

      this.setData({
        goods: goodList
      });
      this.setData({
        checkAllToggle: checkAll
      });
    },

    /** 选择单一商品 */
    selectGoods: function (e) {
      var id = e.currentTarget.dataset.id;
      var goodList = this.goods;

      for (var i = 0; i < goodList.length; i++) {
        if (id == goodList[i].goods_id) {
          goodList[i].selected = !goodList[i].selected;
        }
      }

      var checkAll = true;

      for (var j = 0; j < goodList.length; j++) {
        if (!goodList[j].selected) {
          checkAll = false;
        }
      }

      this.setData({
        checkAllToggle: checkAll
      });
      this.setData({
        goodList: goodList
      });
    },
    //添加商品
    addGoods: function () {
      var that = this;
      var ids = [];
      var goodList = this.goods;

      for (var i = 0; i < goodList.length; i++) {
        if (goodList[i].selected) {
          ids.push(goodList[i].goods_id);
        }
      }

      if (ids.length <= 0) {
        app.globalData.showTextWarining("还没有选中商品");
        return;
      }

      request.post('/api/Distribut/add_goods', {
        data: {
          goods_ids: ids,
          terminal: "miniapp"
        },
        success: function (res) {
          if (res.data.status == 1) {
            app.globalData.showSuccess('添加成功', function () {
              that.onPullDownRefresh();
            });
          }
        }
      });
    },
    goodsDetail: function (e) {
      var goodsId = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: '/pages/goods/goodsInfo/goodsInfo?goods_id=' + goodsId
      });
    }
  }
};
</script>
<style>
/*checkbox重写样式*/
page{
    background: #f5f5f5;
}
checkbox .wx-checkbox-input{
   border-radius: 50%;
   width: 40rpx;
   height: 40rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   border: none;
   background: red;
   width: 44rpx;
   height: 44rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
   border-radius: 50%;
   width: 40rpx;
   height: 40rpx;
   line-height: 40rpx;
   text-align: center;
   font-size:30rpx;
   color:#fff;
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}
/*主样式*/
.container{
     background-color: #f5f5f5;
}
.search-bar{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 5% 0;
    border-top: 1px solid #f3f3f3;
}
.search-input{
    width: 80%;
    float: left;
    border: 1rpx solid #f3f3f3;
    box-sizing: border-box;
    height: 80rpx;
    padding-left:20rpx;
    border-top-left-radius:10rpx;
    border-bottom-left-radius: 10rpx;
    font-size: 14px;
    background: #fff;
}
.search-btn{
    width: 20%;
    height: 80rpx;
    background-color: #ff6a00;
    display: inline-block;
    text-align: center;
    border-top-right-radius:10rpx;
    border-bottom-right-radius: 10rpx;
}
.search-btn .search-img{
    height: 45rpx;
    width: 45rpx;
    padding: 20rpx;
}
.nav{
     border-bottom: 1px solid #f3f3f3;
}
.nav-item{
    float: left;
    width: 20%;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    border-bottom: 1px solid #f3f3f3;
    background-color: #fff;
}
.nav-item .ico-filter{
    width: 20rpx;
    height: 20rpx;
    margin-left: 10rpx;
    line-height: 0;
}
.ico-dir{
    width: 16rpx;
    height: 22rpx;
    margin-left: 10rpx;  
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 0;
}
.ico-dir-dn {
    background-position-x: -16rpx;
}
.ico-dir-up {
    background-position-x: -32rpx;
}
.disgoods-list{
    width: 100%;
    padding-bottom: 100rpx;
}
.choice_item{
    position: relative;
    width: 710rpx;
    box-sizing: border-box;
    min-height: 200rpx;
    padding: 10rpx 3%;
    font-size: 28rpx;
    border-radius: 10rpx;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20rpx;
    background: #fff;
}
.goods-check{
    float: left;
    margin-right: 10px;
    margin-top: 76rpx;
}
.img-wrap{
    float: left;
    width: 180rpx;
    height: 180rpx;
    padding:0 10rpx 10rpx;
    margin-right: 10px;
}
.img-wrap image{
    width: 100%;
    height: 100%;
}
.item-cont{
  float: right;
  width: 370rpx;
}
.item-cont .title{
    height: 72rpx;
    margin: 12rpx 0;
    padding-right: 10rpx;
    line-height: 36rpx;
    color: #333;
    overflow: hidden;
}
.price{
    display: inline-block;
    color: #999;
    padding-bottom: 20rpx;
    font-weight: bold;
}
.comment{
    color: #ff6a00;
    font-weight: bold;
}
.distri-bot{
    width: 100%;
    height: 100rpx; 
    background-color: #ededed;
    position: fixed; 
    left: 0; 
    bottom: 0;
}
.bot-left{ 
    width: 80%; 
    float: left;
    line-height: 100rpx;
    font-size: 28rpx;
}
.bot-left .check-all{
    margin-left: 10px;
}
.bot-left label{
    vertical-align: middle;
}
.bot-right{ 
    width: 20%; 
    float: right;
}
.bot-right button{
    background-color: #ff6a00;
    border: none; 
    line-height: 100rpx;
    color: #fff;
    font-size: 14px;
}
/* 弹框相关 */
.filter-modal{
    position: fixed;
    left: 150rpx;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    background-color: white;
    overflow-x: hidden;
    padding-bottom: 30rpx;
}
.all-classification{
    margin-top: 30PX;
    line-height: 60rpx;
    overflow: hidden;
}
.allcla-btn,.allbra-btn{
    font-size: 15px;
    color: #333;
    padding: 5px 0 5px 10px;
    border-bottom: 1px solid #f3f3f3;
}
.claitem-box .cla-item,.braitem-box .bra-item{
    font-size: 14px;
    color: #666;
    border: 1px solid #f3f3f3;
    margin-left: 10px;
    display: inline-block;
    margin-top: 30rpx;
    box-shadow:0 0 10px 1px #ededed;
    line-height: 30px;
    padding: 0 6px;
}
.all-brand{
    line-height: 60rpx;
    overflow: hidden;
    margin-top: 10px;
}

</style>